<template>
	<div class="newsdetail-container">
		<div class="newsdetail-head">
			<div class="name">物料详情</div>
		</div>
		<div class="newsdetail-con">
			<div class="title">{{ newsData.title }} </div>
			<div><img :src="newsData.url" alt=""></div>
		
				<div class="mb10" v-for="item in newsData.material_info" :key="item.specs_desc">
					{{ item.specs_desc }} 
					<el-button class="ml10" @click="downFile(item.specs_url, item.specs_desc)">
						下载物料</el-button>
					</div>
		
		</div>
	</div>
</template>

<script setup name="materialDetail">
import { ref, defineProps } from 'vue'
import {downFile} from '/@/utils/globalMethods';
const props = defineProps(['data']);
const newsData = ref(props.data);


</script>

<style scoped lang="scss">
.newsdetail {
	margin: 10px auto 0;
	padding-bottom: 2px;
	position: relative;

	&-container {
		width: 100%;
		overflow: auto;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 5px;
		background: #ffffff;
	}

	&-head {
		box-sizing: border-box;
		padding: 25px 30px 0;
		position: relative;
		height: 102px;

		.name {
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 20px;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: rgb(62, 66, 73);
			margin-bottom: 15px;
		}

		.time {
			font-size: 12px;
			color: #666666;
			height: 20px;
			line-height: 20px;
			text-align: left;
		}

	}

	&-con {
		height: calc(100% - 102px - 30px);
		background: #ffffff;
		width: 98%;
		font-size: 16px;
		box-sizing: border-box;
		padding: 0 30px 20px;
		overflow: auto;
		color: #666666;
		text-align: center;
		line-height: 30px;
		:deep(p) {
			font-size: 16px;
			color: rgb(16, 16, 16);
		}

		:deep(img) {
			max-width: 96% !important;
			display: block;
			margin: 12px auto;
			height: auto !important;
		}
		.title{
			font-weight: bold;
			font-size: 18px;
		}
	}

	&-bottom {
		height: 85px;
		display: flex;
		align-items: center;
		justify-content: center;

		div {
			width: 140px;
			height: 35px;
			text-align: center;
			line-height: 35px;
			text-align: center;
			font-size: 14px;
			color: #ffffff;
			background: rgb(231, 56, 34);
			border-radius: 18px;
			cursor: pointer;

			&.to-manage {
				background: rgb(233, 157, 66);
			}
		}

	}

	&-success {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		background: rgba(0, 0, 0, 0.6);
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;

		.rs {
			width: 282px;
			height: 229px;
			background: rgb(251, 251, 251);
			text-align: center;
			box-sizing: border-box;
			padding: 28px 0 0;

			p {
				color: rgb(64, 149, 229);
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 42px;
			}

			.close-rs {
				background: rgb(64, 149, 229);
				width: 80px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				margin: 0 auto;
				border-radius: 4px;
				font-size: 14px;
				color: #ffffff;
			}
		}
	}
}
</style>